<div>

    <form name="vm.portMappingForm">

        <div ng-if="vm.portMappingType === vm.PORT_MAPPING_OPTIONS.auto">
            <div style="padding-bottom: 0;">
                <h3>{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.HEADER' | translate }}</h3>
            </div>

            <div>
                <p translate="ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.TEXT1"></p>
                <p translate="ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.TEXT2"></p>
            </div>

            <div layout="row" layout-padding>
                <div flex="50" flex-gt-sm="40">
                    <eb-label-container label="{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.MOBILE_PORT' | translate }}"
                                        config="vm.eblockerMobilePortConfig">
                    </eb-label-container>
                </div>

                <div flex="50" flex-gt-sm="50">
                    <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                        <label>{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.MAP_PORT_LABEL' | translate }}</label>
                        <input size="32" type="number" name="port" ng-min="vm.minPort" ng-max="vm.maxPort" ng-model="vm.portMapping" ng-change="vm.onChangePort()" required>
                        <div ng-messages="vm.portMappingForm.port.$error" ng-if="vm.portMappingForm.$submitted || vm.portMappingForm.port.$touched">
                            <div ng-message="required">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_REQUIRED' | translate }}</div>
                            <div ng-message="number">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_NUMBER' | translate }}</div>
                            <div ng-message="max">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_IN_BETWEEN' | translate:{min: vm.minPort, max: vm.maxPort} }}</div>
                            <div ng-message="min">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_IN_BETWEEN' | translate:{min: vm.minPort, max: vm.maxPort} }}</div>
                        </div>
                    </md-input-container>
                </div>
            </div>

            <div class="config-frame md-whiteframe-z1" layout="row" layout-xs="column" layout-sm="column" layout-align="start center">

                <div flex-gt-sm="40">
                    <md-button type="button"
                               ng-disabled="!vm.isPortValid() || vm.isMappingPorts"
                               ng-click="vm.mapPortsNow()"
                               class="md-raised md-primary md-accent">
                        {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.MAP_PORTS' | translate }}
                    </md-button>
                </div>

                <div hide-gt-sm layout-padding></div>

                <div layout="row" flex-gt-sm="45" layout-align="start center">

                    <!-- Mapping port IN PROGRESS -->
                    <div ng-show="vm.isMappingPorts" layout="row" layout-align="start center">
                        <md-progress-circular md-mode="indeterminate" md-diameter="32"></md-progress-circular>
                        <span style="margin-left: 20px;">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.LABEL_WAITING' | translate}}</span>
                    </div>

                    <!-- Mapping port DONE -->
                    <div layout="row" layout-align="center center" ng-show="!vm.isMappingPorts && (vm.portsAreMapped || vm.portsMappingError)">
                        <!-- Mapping port SUCCESS -->
                        <div layout="row" layout-align="center center" ng-show="vm.portsAreMapped">
                            <span class="content-ok" style="margin-right: 10px;">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.LABEL_MAPPING_SUCCESS' | translate}}</span>
                            <md-icon class="content-ok" md-svg-src="/img/icons/ic_check_black.svg"></md-icon>
                        </div>
                        <!-- Mapping port ERROR -->
                        <div layout="row" layout-align="center center" ng-show="vm.portsMappingError">
                            <span class="content-error" style="margin-right: 10px;">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.AUTO.LABEL_MAPPING_ERROR' | translate}}</span>
                            <md-icon class="content-error" md-svg-src="/img/icons/ic_close_black_24px.svg"></md-icon>
                        </div>
                    </div>
                </div>

                <div hide-gt-sm layout-padding></div>

                <!-- Mapping port HELP -->
                <div flex-gt-sm="15" layout="row" layout-align="center center" layout-gt-sm-align="end center">
                    <eb-help-inline template="app/components/vpnHome/wizard/help-port-forwarding.template.html"
                                    as-dialog="true">
                    </eb-help-inline>
                </div>
            </div>

        </div>

        <!-- MANUAL MAPPING -->
        <div ng-if="vm.portMappingType === vm.PORT_MAPPING_OPTIONS.manual">
            <div style="padding-bottom: 0;">
                <h3>{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.MANUAL.HEADER' | translate }}</h3>
            </div>

            <div>
                <p translate="ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.MANUAL.TEXT1"></p>
            </div>

            <div layout="row" layout-padding>
                <div flex="50" flex-gt-sm="40">
                    <eb-label-container label="{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.MANUAL.MOBILE_PORT' | translate }}"
                                        config="vm.eblockerMobilePortConfig">
                    </eb-label-container>
                </div>

                <div flex="50" flex-gt-sm="50">
                    <md-input-container md-theme="eBlockerThemeInput" style="width: 100%;">
                        <label>{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.MANUAL.MAP_PORT_LABEL' | translate }}</label>
                        <input size="32" type="number" name="port" ng-min="vm.minPort" ng-max="vm.maxPort" ng-model="vm.portMapping" ng-change="vm.onChangePort()" required>
                        <div ng-messages="vm.portMappingForm.port.$error" ng-if="vm.portMappingForm.$submitted || vm.portMappingForm.port.$touched">
                            <div ng-message="required">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_REQUIRED' | translate }}</div>
                            <div ng-message="number">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_NUMBER' | translate }}</div>
                            <div ng-message="max">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_IN_BETWEEN' | translate:{min: vm.minPort, max: vm.maxPort} }}</div>
                            <div ng-message="min">{{ 'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.ERROR.PORT_IN_BETWEEN' | translate:{min: vm.minPort, max: vm.maxPort} }}</div>
                        </div>
                    </md-input-container>
                </div>
            </div>

            <div>
                <md-checkbox md-theme="eBlockerThemeCheckbox" class="md-primary" ng-model="vm.manuallyMappedPortsConfirm">
                    {{'ADMINCONSOLE.VPN_HOME_WIZARD.STEP_DO_PORT_MAPPING.MANUAL.TEXT_CONFIRM' | translate}}
                </md-checkbox>
            </div>

        </div>

        <div hide-xs layout="row" layout-align="end center">
            <md-button type="button" ng-click="vm.openSaveWizardDialog()" class="md-raised md-secondary">
                {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.CANCEL' | translate }}
            </md-button>
            <md-button type="button" ng-click="vm.prevStep()" class="md-raised md-secondary">
                {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.PREV' | translate }}
            </md-button>
            <md-button type="button"
                       ng-if="vm.portMappingType === vm.PORT_MAPPING_OPTIONS.auto"
                       ng-disabled="!vm.portsAreMapped || vm.isSavingConfig"
                       ng-click="vm.saveVpnStatusAndContinue()"
                       class="md-raised md-primary md-accent">
                {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.SAVE_AND_CONTINUE' | translate }}
            </md-button>
            <md-button type="button"
                       ng-if="vm.portMappingType === vm.PORT_MAPPING_OPTIONS.manual"
                       ng-disabled="!vm.manuallyMappedPortsConfirm || vm.isSavingConfig"
                       ng-click="vm.saveVpnStatusAndContinue()"
                       class="md-raised md-primary md-accent">
                {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.SAVE_AND_CONTINUE' | translate }}
            </md-button>
        </div>

        <div hide-gt-xs layout-xs="column" layout-align-xs="center center">
            <div layout="row" layout-align="end center">
                <md-button type="button" ng-click="vm.prevStep()" class="md-raised md-secondary">
                    {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.PREV' | translate }}
                </md-button>
                <md-button type="button"
                           ng-if="vm.portMappingType === vm.PORT_MAPPING_OPTIONS.auto"
                           ng-disabled="!vm.portsAreMapped || vm.isSavingConfig"
                           ng-click="vm.saveVpnStatusAndContinue()"
                           class="md-raised md-primary md-accent">
                    {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.SAVE_AND_CONTINUE' | translate }}
                </md-button>
                <md-button type="button"
                           ng-if="vm.portMappingType === vm.PORT_MAPPING_OPTIONS.manual"
                           ng-disabled="!vm.manuallyMappedPortsConfirm || vm.isSavingConfig"
                           ng-click="vm.saveVpnStatusAndContinue()"
                           class="md-raised md-primary md-accent">
                    {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.SAVE_AND_CONTINUE' | translate }}
                </md-button>
            </div>
            <div layout="row" layout-align="end center">
                <md-button type="button" ng-click="vm.openSaveWizardDialog()" class="md-raised md-secondary">
                    {{ 'ADMINCONSOLE.VPN_HOME_WIZARD.ACTION.CANCEL' | translate }}
                </md-button>
            </div>
        </div>

    </form>
</div>
